<template>
  <div>
    <!--表单-->
    <el-form
      ref="formControl"
      v-model="model"
      :partModel="partModel"
      v-bind="formProps"
    >
      <template v-slot:text="">
        <h3>使用插槽建立的子控件</h3>
        <el-input v-model="model.text" placeholder="请输入内容"></el-input>
      </template>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="formState.show = false">取 消</el-button>
      <el-button type="primary" @click="mysubmit">确 定</el-button>
      <el-button type="" @click="clear">清空</el-button>
    </span>
  </div>
</template>

<script>
import { computed, reactive, watch, ref, defineEmit, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 加载json
import loadJson from './control/loadjson.js'

// 状态
import VueDS from 'vue-data-state'

// 仿后端API
import service from './api/data-service.js'

</script>

<script setup>
  // 表单组件
  import elForm from '/ctrl/nf-el-form/el-form-div.vue'

  const formControl = ref(null)
  onMounted(() => {
    // console.log('表单的$ref', formControl)
  })

  // 访问状态
  const { get } = VueDS.useStore()

  // 定义属性
  const props = defineProps({
    moduleId:  [Number, String], // 模块ID
    formMetaId:  [Number, String], // 表单的ID
    dataId: Number, // 修改或者显示的记录的ID
    type: String // 类型：添加、修改、查看
  })

  // 模块ID + 表单ID = 自己的标志
  const modFormId = computed(() => props.moduleId + props.formMetaId)

  // 子组件里面获取状态
  const dataListState = get.dataListState(modFormId.value)

  // 表单控件的 model
  const model = reactive({})
  // 定义局部的 model
  const partModel = reactive({})

  // 表单控件需要的属性
  let resetFormbyMeta = () => {}
  const formProps = reactive({
    reload: false,
    reset: (fun) => { resetFormbyMeta = fun }
  })

  // 切换表单，立即执行
  watch(() => props.formMetaId, () => {
    // 切换模块的时候，清空表单的model
    for (const key in model) {
      delete model[key]
    }
    // 加载需要的 json
    loadJson(props.moduleId, 'form_' + props.formMetaId,  formProps)
  },
  {immediate: true})

  // 仿后端API
  const { getData, addData, updateData } = service(modFormId.value)

  // 监听记录ID的变化，加载数据便于修改
  watch(() => props.dataId, (id) => {
    if (props.type !== 'add') {
      // 加载数据
      getData( id ).then((data) => {
        Object.assign(model, data[0])
        // formProps.reload = !formProps.reload
        // formProps.reset()
        resetFormbyMeta()
      })
    }
  },
  {immediate: true})

  // 提交数据
  const mysubmit = () => {
    // 判断是添加还是修改
    delete (model.ID)
    if (props.type === 'add'){
      // 添加数据
      addData(model).then(() => {
        ElMessage({
          type: 'success',
          message: '添加数据成功!'
        })
        // 重新加载第一页的数据
        dataListState.reloadFirstPager()
      })
    } else if (props.type === 'update') {
      // 修改数据
      updateData(model, props.dataId).then(() => {
        ElMessage({
          type: 'success',
          message: '修改数据成功!'
        })
        // 重新加载当前页号的数据
        dataListState.reloadCurrentPager()
      })
    }
  }

  // 清空表单
  const clear = ()=> {
    formControl.value.resetForm()
  }
</script>
